<template>
	<div >
    <div style="font-size: 50px;color: #2798f4;font-family: 楷体;border-bottom: 1px solid #8c8b8b;">
          我的作品
    </div>
    <!--文章容器  文章列表开始-->
    <div class="recent-content" >
      <div class="lista" v-for="news in newsList" :key="news.id" style="position: relative">
        <h3>
          <span style="color: #ff5953">文章标题：</span>
          <router-link :to="{path:'/newsDetail',query:{id:news.id}}">
            {{news.name}}
          </router-link>
          &nbsp;
          &nbsp;
          <span v-if="news.state==1" style="color: #4cc860">已发布</span>
          <span v-else style="color: red">未发布</span>

        </h3>
        <div>
          <button type="button" style="position: absolute;right: 100px;top:10px;background-color: sandybrown" @click="update(news.id)" > 编辑</button>
        </div>
        <div>
          <button type="button" style="position: absolute;right: 60px;top:10px;background-color: red" @click="deleteNews(news.id)" > 删除</button>
        </div>

        <div class="pov">
          <div class="sview">
            <div class="sviewl">
              <div class="tittop">
                <b>创作于 {{news.operTime}}</b>
                &nbsp;
                &nbsp;
                <b>作者： {{news.writer}}</b>
              </div>
              <div class="art_summary">
                <router-link :to="{path:'/newsDetail',query:{id:news.id}}">
                  <p>{{news.outline}}</p>
                </router-link>
              </div>
              <div class="footbar">
                <i class="footbar-category" v-for="type in news.newsTypeList" :key="type.id"><a href="javaScript:void(0)" >{{type.name}}</a></i>
                <i class="footbar-like"><a href="javascript:;">阅读(908)</a></i>
              </div>
            </div>
            <!--封面图-->
            <div class="sviewr">
              <router-link :to="{path:'/newsDetail',query:{id:news.id}}">
                <img :src= "servePath +news.picture" width="100" height="100">
              </router-link>
            </div>

          </div>
        </div>
      </div>
    </div>



    <el-dialog title="验证账户信息" :visible.sync="dialogVisible" width="40%">
      <span style="color: #ff5953">密码：</span>
      <el-input placeholder="输入密码以确保财产安全" v-model="password"></el-input>
      <br/>
      <br/>
      <div style="text-align: center">
        <button type="button" style="border: #D6D1B2 solid 1px; width: 70px;border-radius: 10px;background-color: #e2c46c" @click="dialogVisible = false">取 消</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" style="border: #D6D1B2 solid 1px; width: 70px;border-radius: 10px;background-color: #e2c46c" @click="save()">保 存</button>
      </div>


    </el-dialog>
    <Upate ref="update"></Upate>
  </div>
</template>

<script>
import Upate from './UpateMynews.vue'
export default {
  components:{
    Upate
  },
  data() {
    return {
      dialogVisible:false,
      newsList:[],
      servePath:'http://127.0.0.1:8088/',
      password:'',
      id:''
    }
  },methods: {
    update(id){
      this.$refs.update.dialogVisible=true;
      this.$refs.update.findUserNewsById(id);
    },
    save(){
      this.$http.get("userApi/UserNewsController/findUser?password="+this.password).then((resp) => {
        if (resp.data.data == 1){
                      this.$http.get("userApi/UserNewsController/deleteNews?id="+this.id).then((resp) => {
                        if (resp.data.code==200) {
                          this.$message({
                            showClose: true,
                            message: '恭喜你，删除成功✔',
                            type: 'success'
                          });
                          this.$router.go();
                        }
                      })
        }else {
          this.$message({
            showClose: true,
            message: '密码错误！请确保是本人操作，篡改他人财产触犯法律规定',
            type: 'error'
          });
        }
      })
    },
    getNews(){
      this.$http.get("userApi/UserNewsController/mynewsList").then((resp) => {
        if (resp.data.code==200){
          this.newsList = resp.data.data;
        }
      })
    },
    deleteNews(id){
      this.$confirm('您确定要删除此条评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //添加请求地点
        this.id=id
        /*发送修改状态的请求*/
        this.dialogVisible=true;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }

  },
  mounted() {
    //获取评论信息
    this.getNews();
  }

}
</script>
<style src="../../assets/css/index.css" scoped>
</style>

